import React from 'react'
import { Form, Input, Button, Checkbox } from 'antd'
import { UserOutlined, LockOutlined } from '@ant-design/icons'

import './login.less'
import logo from './images/logo.jpeg'

const Login = () => {
  const onFinish = (values) => {
    console.log('Received values of form: ', values)
  }

  return (
    <div className="login">
      <header className="login-header">
        <img src={logo} alt='logo'/>
        <h1>后台管理系统</h1>
      </header>
      <div className="login-container">
        <h2>用户登陆</h2>
        <Form
          name="normal_login"
          className="login-form"
          initialValues={{
            remember: true,
          }}
          onFinish={onFinish} // 提交表单且数据验证成功后回调事件
        >
          <Form.Item
            name="username"
          >
            <Input
              prefix={<UserOutlined className="site-form-item-icon" />} // 带有前缀图标的 input, 里面可以写react节点
              placeholder="请输入用户名"
            />
          </Form.Item>
          <Form.Item
            name="password"
          >
            <Input
              prefix={<LockOutlined className="site-form-item-icon" />}
              type="password"
              placeholder="请输入密码"
            />
          </Form.Item>
          <Form.Item>
            <Form.Item name="remember" valuePropName="checked" noStyle>
              <Checkbox>记住我</Checkbox>
            </Form.Item>

            <a className="login-form-forgot" href="">
              忘记密码
            </a>
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit" className="login-form-button">
              登陆
            </Button>
            或者 <a href="">现在去注册！</a>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}
export default Login
